<template>
	<div>
		<d2-container v-if="!orderShow">
			<div slot="header" style="display:flex; justify-content: space-between;">
				<div>商品管理</div>
				<div>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item label="分类">
							<el-select v-model="category" placeholder="请选择">
								<el-option v-for="item in className" :key="item.value" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="自选商品">
							<el-select v-model="zixuan" placeholder="请选择">
								<el-option :value="1" label="是"></el-option>
								<el-option :value="2" label="否"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="关键词">
							<el-input placeholder="商品名" v-model="search"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small " icon="el-icon-plus" @click="onGuiGe">辅助单位</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small " icon="el-icon-plus" @click="onAddProduct">添加</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small " icon="el-icon-s-promotion" @click="onOnekeyState(1)">批量下架</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small " icon="el-icon-s-flag" @click="onOnekeyState(2)">批量上架</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div>
				<template>
					<el-table stripe highlight-current-row style="width: 100%" :data="productData" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						<el-table-column prop="id" label="id"></el-table-column>
						<el-table-column label="主图">
							<template slot-scope="scope">
								<img :src="baseUrl + scope.row.thumb" width="50" height="50" v-if="scope.row.thumb != null" />
							</template>
						</el-table-column>
						<el-table-column prop="cateName" label="分类"></el-table-column>
						<el-table-column prop="name" label="名称"></el-table-column>
						<el-table-column prop="des" label="商品描述"></el-table-column>
						<el-table-column prop="sort" label="排序" sortable></el-table-column>
						<el-table-column prop="price" label="价格"></el-table-column>
						<el-table-column label="荤素主食">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.hunsu == 1">荤菜</el-tag>
								<el-tag type="danger" v-if="scope.row.hunsu == 2">素菜</el-tag>
								<el-tag type="danger" v-if="scope.row.hunsu == 3">主食</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="自选套餐">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.zixuan == 1">是</el-tag>
								<el-tag type="danger" v-if="scope.row.zixuan == 2">否</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.state == 1">上架中</el-tag>
								<el-tag type="danger" v-if="scope.row.state == 2">下架中</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onState(scope.row.id, 2)" v-if="scope.row.state == 1">下架</el-button>
								<el-button type="text" size="small" v-if="scope.row.state == 2" @click="onState(scope.row.id, 1)">上架</el-button>
								<el-button type="text" size="small" @click="onComUpdata(scope.row.id)">修改</el-button>
								<el-button type="text" size="small" @click="onProDel(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<!-- 分页 -->
			<template slot="footer">
				<el-pagination @current-change="handleCurrentChange" :current-page="page.current" layout="total, prev, pager, next, jumper"
				 :total="page.total" :page-size="page.size"></el-pagination>
			</template>
			<!-- 产品规格 -->
			<el-dialog title="辅助规格" :visible.sync="dialogSxname" width="500px">
				<el-dialog width="400px" title="修改单位" :visible.sync="dialogSxnameInner" append-to-body>
					<el-form label-width="100px">
						<el-form-item label="修改单位">
							<el-input v-model="SxnameUpdate"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" @click="onSxUpdateSubmit">确定</el-button>
							<el-button @click="dialogSxnameInner = false" size="small">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-form label-width="80px">
					<el-form-item label="单位">
						<el-input v-model="sx_name" style="width: 300px;"></el-input>
					</el-form-item>
				</el-form>
				<template>
					<el-table :data="sxName" style="width: 100%" max-height="300">
						<el-table-column type="index" width="50"></el-table-column>
						<el-table-column prop="name" label="单位"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onGuiUpdate(scope.row.id)">修改</el-button>
								<el-button type="text" size="small" @click="onGuiDel(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<div slot="footer">
					<el-button type="primary" @click="onGuiGeAdd" size="small">添加</el-button>
					<el-button size="small" @click="dialogSxname = false">关闭</el-button>
				</div>
			</el-dialog>
		</d2-container>
		<goods-add v-model="orderShow" :id="id"></goods-add>
	</div>
</template>

<script>
	import goodsAdd from './goodsAdd';
	import {
		getGuige,
		getCategoryList,
		postGuigeAdd,
		getGuigeEdit,
		postGuigeUpdate,
		getGuigeDel,
		getProduct,
		getProductState,
		getProductDel,
		postProductPlsj,
		postProductPlxj
	} from '@/api/api';
	export default {
		components: {
			goodsAdd
		},
		data() {
			return {
				productData: [],
				orderShow: false,
				page: {
					//分页
					total: 20,
					current: 1,
					size: 10
				},
				//单位
				sx_name: '',
				dialogSxname: false,
				sxName: [], //单位 规格表
				SxnameUpdate: '', //修改input框
				dialogSxnameInner: false, //修改弹窗
				Sxid: -1,
				//子组件 添加 修改
				id: -1,
				baseUrl: process.env.VUE_APP_URL,
				search: '',
				category: '',
				className: [],
				zixuan:'',			//是否自选商品
				multipleSelectionId:'' //多选
			};
		},
		watch: {
			dialogSxname(val) {
				if (!val) {
					this.sx_name = '';
				}
			}
		},
		mounted() {
			this.getProductData();
			this.getCategory()
		},
		methods: {
			//商品列表
			getProductData() {
				let data = {
					page: this.page.current,
					search: this.search,
					category: this.category,
					zixuan:this.zixuan
				};
				getProduct(data).then(res => {
					if (res.state == 0) {
						this.productData = res.data.data;
						this.page.size = res.data.per_page;
						this.page.total = res.data.total;
					}
				});
			},
			//分类加载
			getCategory() {
				getCategoryList().then(res => {
					if (res.state == 0) {
						this.className = res.data
					}
				})
			},
			onSearch() { //搜搜
				this.page.current = 1;
				this.getProductData()
			},
			onAddProduct() {
				this.id = -1;
				this.orderShow = true;
			},
			//分页
			handleCurrentChange(val) {
				this.page.current = val;
				this.getProductData();
			},
			//辅助单位 规格
			onGuiGe() {
				getGuige().then(res => {
					if (res.state == 0) {
						this.sxName = res.data.data;
						this.dialogSxname = true;
					}
				});
			},
			//规格添加
			onGuiGeAdd() {
				let data = {
					name: this.sx_name
				};
				postGuigeAdd(data).then(res => {
					if (res.state == 0) {
						this.$message.success('添加成功');
						this.onGuiGe();
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			onGuiUpdate(id) {
				getGuigeEdit(id).then(res => {
					if (res.state == 0) {
						this.SxnameUpdate = res.data.name;
						this.Sxid = res.data.id;
						this.dialogSxnameInner = true;
					}
				});
			},
			//规格修改名
			onSxUpdateSubmit() {
				postGuigeUpdate({
					name: this.SxnameUpdate,
					id: this.Sxid
				}).then(res => {
					if (res.state == 0) {
						this.$message.success('修改成功');
						this.dialogSxnameInner = false;
						this.onGuiGe();
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			onGuiDel(id) {
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getGuigeDel(id).then(res => {
						if (res.state == 0) {
							this.$message.success('删除成功');
							this.onGuiGe();
						}
					});
				});
			},
			//商品修改
			onComUpdata(id) {
				this.id = id;
				this.orderShow = true;
			},
			//产品开启关闭
			onState(id, state) {
				this.$confirm('此操作将更改商品的显示状态, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getProductState(id).then(res => {
						if (res.state == 0) {
							this.$message.success('修改成功');
							this.getProductData();
						}
					});
				});
			},
			//产品删除
			onProDel(id) {
				this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getProductDel(id).then(res => {
						if (res.state == 0) {
							this.$message.success('修改成功');
							this.getProductData();
						}
					});
				});
			},
			handleSelectionChange(val) {
				this.multipleSelectionId = val.map(function(item){
					return item.id
				}).join(',')
				console.log(this.multipleSelectionId)
			},
			// 一键上架 下架
			onOnekeyState(state){
				//state  1下架 2 上架
				if(state==1){
					postProductPlxj({ids:this.multipleSelectionId}).then(res=>{
						if(res.state==0){
							this.$message.success('批量下架成功')
							this.getProductData()
						}
					})
				}else{
					postProductPlsj({ids:this.multipleSelectionId}).then(res=>{
						if(res.state==0){
							this.$message.success('批量上架成功')
							this.getProductData()
						}
					})
				}
			}
		}
	};
</script>

<style></style>
